<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      @scroll="handleScroll"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <!-- 顶部 搜索 banner -->
      <view>
        <u-navbar
          backIconColor="#fff"
          :is-back="true"
          :background="scrollTop >= 100 ? background1 : background"
          :border-bottom="false"
          title="酒店住宿"
          title-color="#fff"
        >
        </u-navbar>
        <!-- </view> -->
        <view class="" style="position: relative">
          <view
            class="contentBg"
            :style="{
              paddingTop: `${statusBarHeight + navbarHeight}px`,
              backgroundImage: `url(${getImageUrl('hotel-bg.png')})`,
              height: `${210 + statusBarHeight}px`,
              top: `-${statusBarHeight + navbarHeight}px`
            }"
          >
          </view>
        </view>
        <view class="content">
          <view class="card">
            <view class="card-top dis-flex flex-y-between flex-x-center">
              <view class="city">{{ address.name }}</view>
              <view class="weiz dis-flex flex-y-between flex-x-center" @click="initLocation">
                <text class="dw">当前位置</text>
                <u-icon name="/static/cxdw.png" size="32"></u-icon>
              </view>
            </view>
            <u-line></u-line>
            <view class="check-group dis-flex flex-y-between flex-x-center">
              <view class="in">
                <view class="tl">今天入住</view>
                <view class="input">
                  <text class="date">10月1日</text>
                  <text class="week">周二</text>
                </view>
              </view>
              <view class="in">
                <view class="tl">明天离店</view>
                <view class="input">
                  <text class="date">10月2日</text>
                  <text class="week">周三</text>
                </view>
              </view>
              <view class="count">
                <text class="c-t">共1晚</text>
                <u-icon name="/static/enter.png" size="20"></u-icon>
              </view>
            </view>
            <u-line></u-line>
            <view class="search dis-flex">
              <u-icon name="search" size="28"></u-icon>
              <input class="sc-input" placeholder="搜索酒店位置" />
            </view>
            <u-line></u-line>
            <view class="bt"> 查找酒店 </view>
          </view>

          <view class="active-box">
            <view class="active-top dis-flex flex-y-between flex-x-center">
              <view class="top-l dis-flex">
                <view
                  class="t-item dis-flex flex-y-center"
                  @click="checkType = 1"
                  :class="checkType == 1 ? 'checked' : ''"
                >
                  <text>酒店</text>
                  <image class="plate-item-image" v-if="checkType == 1" src="@/static/hxxz.png">
                  </image>
                </view>
                <view
                  class="t-item dis-flex flex-y-center"
                  @click="checkType = 2"
                  :class="checkType == 2 ? 'checked' : ''"
                >
                  <text>周边</text>
                  <image class="plate-item-image" v-if="checkType == 2" src="@/static/hxxz.png">
                  </image>
                </view>
              </view>
            </view>
            <view class="list">
              <view class="active-item dis-flex" v-for="(item, index) in itemList" :key="index">
                <view
                  class="fanli-detail dis-flex"
                  @click="routeTo('/other/merchant-center/merchant-center-hotel')"
                  style="margin-bottom: 30rpx"
                >
                  <u-image
                    class="goods-avarar"
                    :src="`${getImageUrl('banner.png')} `"
                    width="345rpx"
                    height="345rpx"
                  ></u-image>
                  <view class="goods-con">
                    <view class="tl oneline-hide-1">{{ item.title }}</view>
                    <view class="sales">
                      <text class="star">4.9分</text>
                      <text class="pos">距您780m</text>
                    </view>
                    <view class="bottom dis-flex flex-y-center">
                      <view class="price">
                        <text style="font-size: 28rpx">¥</text>
                        <text>160.00</text>
                        <text style="font-size: 28rpx">起</text>
                      </view>
                      <view class="line-price">¥289</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      checkType: 1,
      itemList: [
        {
          picUrl: '',
          title: '乡村儿童守护公益计划乡村儿童守护公益',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远，关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        }
      ],
      scrollTop: 0,
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight,
      address: {
        name: '',
        code: ''
      }
    }
  },
  onLoad() {
    this.address = uni.getStorageSync('address') || {}
    this.queryList(1)
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    subCity(city) {
      return city.length > 4 ? city.substr(0, 4) + '...' : city
    },
    onCity() {
      uni.$on('selectAddress', (res) => {
        this.address = uni.getStorageSync('address') || {}
        this.queryList(1)
        uni.$off('selectAddress')
      })
      uni.navigateTo({
        url: '/other/select-city/select-city'
      })
    },

    initLocation() {
      // #ifdef APP
      if (uni.getStorageSync('firstAddressPer') == 1)
        uni.getLocation({
          type: 'gcj02',
          geocode: true,
          isHighAccuracy: true,
          success: (res) => {
            if (res.address) {
              this.province = res.address.province
              this.city = res.address.city
              this.district = res.address.district
              uni.setStorageSync('address', res)
            }
          },
          fail: function (res) {
            uni.showToast({
              title: '定位失败，请检查权限和定位是否打开',
              duration: 2000,
              icon: 'none'
            })
          },
          complete: function (res) {}
        })
      // #endif

      // #ifdef MP-WEIXIN
      wx.authorize({
        scope: 'scope.userFuzzyLocation',
        success: (res) => {
          wx.getFuzzyLocation({
            type: 'gcj02',
            success: (res) => {
              let qqmapsdk = new QQMapWX({
                key: 'SWYBZ-EBB3L-VCYPW-MAYMI-NAUPK-GPFEO'
              })
              this.latitude = res.latitude
              this.longitude = res.longitude
              //wx.getFuzzyLocation()方法获取的只是所在地区的经纬度，
              //获取所在地区的具体城市信息还需要进行逆地址解析
              qqmapsdk.reverseGeocoder({
                location: {
                  latitude: this.latitude,
                  longitude: this.longitude
                },
                success: (res) => {
                  let e = {
                    name: res.result.address_component.city,
                    code: res.result.ad_info.adcode,
                    lat: res.result.location.lat,
                    lng: res.result.location.lng,
                    province: res.result.address_component.province
                  }

                  this.address.name = e
                  //this.address = res.result.address_component.city;
                },
                fail: (err) => {
                  console.log(err)
                }
              })
            }
          })
        }
      })

      // #endif
    },

    handleScroll(e) {
      // 页面滚动时触发
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      // console.log('页面上滑', this.scrollTop);
    },
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      this.$u.api
        .getGoodsPage({
          pageNo,
          pageSize,
          shopCityId: this.cityCode,
          categoryId: '',
          cityCode: this.address.code
        })
        .then((res) => {
          // this.$refs.paging.complete(res.data.list)
        })
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.content {
  position: relative;
  padding: 20rpx;

  .top {
    padding-bottom: 30rpx;

    .page-title {
      font-weight: 600;
      font-size: 42rpx;
      color: #ffffff;
    }

    .r {
      font-size: 24rpx;
      color: #ffffff;
    }

    .image {
      margin-right: 10rpx;
      margin-top: 2rpx;
    }
  }

  .card {
    height: 520rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 10rpx 10rpx;
    padding: 30rpx 20rpx;
    margin-bottom: 20rpx;

    .card-top {
      padding: 30rpx 0;

      .city {
        font-weight: 600;
        font-size: 30rpx;
        color: #333333;
        margin-left: 10rpx;
      }

      .weiz {
        font-size: 26rpx;
        color: #10a28f;
        display: flex;
        align-items: center;

        .dw {
          margin-right: 10rpx;
        }
      }
    }

    .check-group {
      padding: 30rpx 0;
      align-items: center;

      .in {
        .tl {
          font-size: 26rpx;
          color: #999999;
        }

        .input {
          color: #333333;
          margin-top: 10rpx;

          .date {
            font-weight: 600;
            font-size: 32rpx;
            margin-right: 10rpx;
          }

          .week {
            font-size: 26rpx;
          }
        }
      }

      .count {
        display: flex;
        align-items: center;
        font-size: 24rpx;

        .c-t {
          margin-right: 6rpx;
        }
      }
    }

    .search {
      // text-align: left;
      padding: 30rpx 0;

      .sc-input {
        font-size: 30rpx;
        padding-left: 20rpx;
      }
    }

    .bt {
      height: 90rpx;
      background: #ff6f10;
      border-radius: 45rpx;
      font-size: 36rpx;
      color: #ffffff;
      line-height: 90rpx;
      text-align: center;
      margin-top: 20rpx;
    }
  }

  .active-box {
    .active-top {
      padding: 10rpx 0 30rpx 0;

      .top-l {
        font-size: 28rpx;
        color: #666666;

        .t-item {
          flex-flow: column;
          margin-right: 60rpx;
        }

        .checked {
          font-weight: 600;
          font-size: 30rpx;
          color: #333333;
        }
      }
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .active-item:nth-child(odd) {
        margin-right: 20rpx;
      }

      .active-item {
        width: 345rpx;
        display: inline-block;
        margin-right: 0;
        height: 540rpx;
        margin-bottom: 20rpx;
        background-color: #fff;

        .fanli-detail {
          padding: 0;
          flex-flow: column;
          height: 540rpx;

          .goods-avarar {
            border-radius: 10rpx;
            background-color: #fff;
            flex: 1;
          }

          .goods-con {
            padding: 20rpx;

            .tl {
              font-size: 28rpx;
              color: #333333;
              margin-bottom: 6rpx;
            }

            .sales {
              margin-bottom: 20rpx;

              .star {
                font-weight: 600;
                font-size: 30rpx;
                color: #10a28f;
                margin-right: 10rpx;
              }

              .pos {
                font-size: 22rpx;
                color: #999999;
              }
            }

            .bottom {
              align-items: flex-end;

              .price {
                font-weight: 600;
                font-size: 36rpx;
                color: #fa453c;
              }

              .line-price {
                margin-left: 10rpx;
                font-size: 30rpx;
                color: #999999;
                text-decoration-line: line-through;
              }
            }
          }
        }
      }
    }
  }
}

.plate-item-image {
  width: 36rpx;
  height: 8rpx;
  margin-top: 10rpx;
}
</style>
